<template>
	<view class="register-container">
		<!-- 顶部logo -->
		<view class="logo-container">
			<image class="logo" src="/static/logo.png"></image>
			<text class="app-name">成语接龙</text>
			<text class="company-name">深圳中博纳</text>
		</view>

		<!-- 注册表单 -->
		<view class="form-container">
			<view class="form-item">
				<image class="input-icon" src="/static/icons/user.png"></image>
				<input v-model="form.username" placeholder="请输入用户名" placeholder-class="placeholder" maxlength="16" />
			</view>
			<view class="form-item">
				<image class="input-icon" src="/static/icons/user.png"></image>
				<input v-model="form.nickname" placeholder="请输入昵称" placeholder-class="placeholder" maxlength="16" />
			</view>


			<view class="form-item">
				<image class="input-icon" src="/static/icons/password.png"></image>
				<input v-model="form.password" placeholder="请输入密码(6-20位字符)" placeholder-class="placeholder" password
					maxlength="20" />
			</view>

			<view class="form-item">
				<image class="input-icon" src="/static/icons/password.png"></image>
				<input v-model="form.confirmPassword" placeholder="请再次输入密码" placeholder-class="placeholder" password
					maxlength="20" />
			</view>

			<button class="register-btn" @click="handleRegister" :loading="loading">
				{{ loading ? '注册中...' : '立即注册' }}
			</button>
		</view>

		<!-- 底部跳转登录 -->
		<view class="footer">
			<text class="footer-text">已有账号？</text>
			<text class="login-link" @click="navigateToLogin">去登录</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					username: '',
					nickname: '',
					password: '',
					confirmPassword: '',
					verificationCode: ''
				},
				loading: false,
				codeCountdown: 0,
				countdownTimer: null
			}
		},
		methods: {
			// 注册处理
			async handleRegister() {
				if (!this.validateForm()) return

				this.loading = true

				try {
					// 调用注册接口
					const res = await uni.request({
						url: 'http://localhost:8003/api/v1/register',
						method: 'POST',
						data: {
							username: this.form.username,
							nickname: this.form.nickname,
							password: this.form.password,
							code: this.form.verificationCode
						}
					})

					if (res.statusCode === 200 && res.data.code === 200) {
						uni.setStorageSync('token', res.data.data.token)
						uni.setStorageSync('nickname', res.data.data.nickname)
						uni.setStorageSync('isLogin', true)
						uni.showToast({
							title: '注册成功',
							icon: 'success'
						})

						// 注册成功后跳转到登录页面
						setTimeout(() => {
							// 跳转到首页
							uni.switchTab({
								url: '/pages/index/index'
							})
						}, 1500)
					} else {
						throw new Error(res.data.message || '注册失败')
					}
				} catch (error) {
					uni.showToast({
						title: error.message,
						icon: 'none'
					})
				} finally {
					this.loading = false
				}
			},

			// 表单验证
			validateForm() {
				if (!this.form.username) {
					uni.showToast({
						title: '请输入用户名',
						icon: 'none'
					})
					return false
				}

				if (!this.form.password) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					})
					return false
				}

				if (this.form.password.length < 6) {
					uni.showToast({
						title: '密码长度不能少于6位',
						icon: 'none'
					})
					return false
				}

				if (this.form.password !== this.form.confirmPassword) {
					uni.showToast({
						title: '两次输入的密码不一致',
						icon: 'none'
					})
					return false
				}

				return true
			},

			// 跳转到登录页面
			navigateToLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
		},

		onUnload() {

		}
	}
</script>

<style lang="scss">
	.register-container {
		height: 80vh;
		padding: 60rpx 50rpx;
		display: flex;
		flex-direction: column;
		background-color: #f5f7fa;
	}

	.logo-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 60rpx;

		.logo {
			width: 120rpx;
			height: 120rpx;
			margin-bottom: 20rpx;
		}

		.app-name {
			font-size: 40rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 10rpx;
		}

		.company-name {
			font-size: 28rpx;
			color: #666;
		}
	}

	.form-container {
		flex: 1;

		.form-item {
			display: flex;
			align-items: center;
			background-color: #fff;
			border-radius: 50rpx;
			padding: 25rpx 30rpx;
			margin-bottom: 30rpx;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
			position: relative;

			.input-icon {
				width: 36rpx;
				height: 36rpx;
				margin-right: 20rpx;
			}

			input {
				flex: 1;
				font-size: 32rpx;
				color: #333;
				height: 60rpx;
				line-height: 60rpx;
			}

			.placeholder {
				color: #bbb;
				font-size: 32rpx;
			}

			.code-input {
				flex: 1;
				padding-right: 20rpx;
			}

			.code-btn {
				background-color: rgba(58, 123, 213, 0.1);
				color: #3a7bd5;
				border-radius: 40rpx;
				font-size: 26rpx;
				height: 60rpx;
				line-height: 60rpx;
				padding: 0 25rpx;
				flex-shrink: 0;

				&[disabled] {
					color: #999;
					background-color: #f0f0f0;
				}

				&::after {
					border: none;
				}
			}
		}

		.register-btn {
			background: linear-gradient(to right, #3a7bd5, #00d2ff);
			color: #fff;
			border-radius: 50rpx;
			font-size: 36rpx;
			height: 90rpx;
			line-height: 90rpx;
			margin-top: 40rpx;
			box-shadow: 0 8rpx 20rpx rgba(58, 123, 213, 0.3);

			&[disabled] {
				opacity: 0.7;
			}
		}
	}

	.footer {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 40rpx;
		padding-bottom: env(safe-area-inset-bottom);

		.footer-text {
			font-size: 28rpx;
			color: #666;
		}

		.login-link {
			font-size: 28rpx;
			color: #3a7bd5;
			margin-left: 10rpx;
		}
	}
</style>